<template>
  <div class="can-add">
    <pk-dialog @onClose="onClose" @confirm="confirm">
      <div class="pl-12 pr-12 mt-24">
        <el-form label-width="60px" :model="ruleForm" :rules="rules" ref="formel">
          <el-form-item label="姓名" prop="fullname">
            <el-input v-model="ruleForm.fullname" />
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item> 
        </el-form>
      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, defineEmits, defineProps, onMounted } from 'vue'
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import { validatePhone, validateEmail } from '@/utils/utils' 
import { candidateAdd, candidateEdit } from '@/api/api'
import { useRoute } from 'vue-router'
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const route = useRoute()
const emits = defineEmits(['onClose', 'confirm'])
const formel = ref(null)
const ruleForm = reactive({
  fullname: null,
  phone: '',
  email: ''
})

const validatePass = (rule, value, callback) => {
  if (ruleForm.email == null && ruleForm.phone == null) {
    callback(new Error('请输入手机号码')) 
    formel.value.validateField('email')
  } else {
    if (!ruleForm.phone && ruleForm.email) {
      callback()
      formel.value.validateField('email')
      return
    }
    if (ruleForm.phone && !validatePhone(ruleForm.phone)) {
      callback(new Error('手机号码格式不正确'))
      formel.value.validateField('email')
      return
    }
    formel.value.validateField('email')
    callback()
  }
}

const validateEmailPass = (rule, value, callback) => {
  if (ruleForm.email == null && ruleForm.phone == null) {
    callback(new Error('请输入邮箱'))
  } else {
    if (!ruleForm.email && ruleForm.phone) {
      callback()
      return
    }
    if (ruleForm.email && !validateEmail(ruleForm.email)) {
      callback(new Error('邮箱格式不正确'))
      return
    }
    callback()
  }
}

const rules = reactive({
  fullname: [ 
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  phone: [ 
    { required: true, validator: validatePass, trigger: 'blur' },
  ],
  email: [ 
    { required: true, validator: validateEmailPass,  trigger: 'blur' },
  ],
})

const addPost = () => {
  const { id } = route.params
  let param = {
    ...ruleForm,
    job_id: id
  }
  if (param.phone) {
    param.phone = '+86' + param.phone
  } 

  candidateAdd({
    ...param
  }).then(res => {
    emits('confirm')
  })
}


const editPost = () => {
  const { id } = route.params
  let param = {
    ...ruleForm
  }
  if (param.phone) {
    param.phone = '+86' + param.phone
  } 

  candidateEdit({
    ...param
  }).then(res => {
    emits('confirm')
  })
}

const onClose = () => {
  emits('onClose')
}

const confirm = () => {
  formel.value.validate((valid) => {
    if (valid) {
      if (ruleForm.candidate_id) {
        editPost()
      } else {
        addPost()
      } 
    }
  })
}

onMounted(() => {
  const { candidate_id, fullname, email, phone } = props.data
  if (candidate_id) {
    ruleForm.candidate_id = candidate_id
    ruleForm.fullname = fullname
    ruleForm.email = email
    ruleForm.phone = phone?.replace('+86', '')
  }


})

</script>

<style lang="scss" scoped>

</style>